<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{height:100%;}
        .cont{width:90%;height:90%;background: #000;margin: 0 auto;cursor: pointer;position: relative;}

        .fire{width:8px;height:16px;position: absolute;}

        .s_fire{width:8px;height:8px;border-radius:50%;position: absolute;}
    </style>
</head>
<body>
    <div class="cont"></div>
</body>
<script src="../move.js"></script>
<script>
    class Fire{
        constructor(ops){
            this.type = ops.type;
            this.start = ops.start;
            this.target = ops.target;
            this.className = ops.className;
            this.cont = document.querySelector(".cont")
            this.createEle()
        }
        createEle(){
            this.ele = document.createElement("div");
            this.cont.appendChild(this.ele);
            this.ele.className = this.className;
            this.ele.style.background = randomColor();
            this.ele.style.left = this.start.x + "px";
            this.ele.style.top = this.start.y + "px";
            this.move()
        }
        move(){
            if(this.type === 0){
                move(this.ele, {
                    left: this.target.x,
                    top: this.target.y
                }, ()=>{
                    this.over()
                });
            }else{  
                // 随机每个元素的横向和竖向的步长
                // 横向正数，为右
                // 横向负数，为左
                // 纵向正数，为下
                // 纵向负数，为上
                let speedX = random(-10, 10);
                let speedY = random(-20, 10);

                let t = setInterval(()=>{

                    // 每运动一次，对纵向坐标+1，实现纵向加速
                    speedY++;

                    // 根据步长，设置当前位置
                    this.ele.style.left = this.ele.offsetLeft + speedX + "px";
                    this.ele.style.top = this.ele.offsetTop + speedY + "px";

                    // 判断元素是否超出容器
                    if(this.ele.offsetTop >= this.cont.offsetHeight){
                        // 清除计时器
                        clearInterval(t);
                        // 删除元素
                        this.ele.remove();
                    }

                },30);

            }
        }
        over(){
            this.ele.remove()
            if(this.type === 0){
                const num = random(10,20);
                const r = random(100, 200);
                for(let i=0;i<num;i++){
                    new Fire({
                        type:1,
                        start:{
                            x: this.target.x,
                            y: this.target.y
                        },
                        target:{},
                        className:"s_fire"
                    })
                }
            }
        }
    }

    const cont = document.querySelector(".cont");
    cont.onclick = function(eve){
        const e = eve || window.event;
        new Fire({
            type:0,
            start:{
                x:e.offsetX, y:cont.offsetHeight - 16
            },
            target:{
                x:e.offsetX, y:e.offsetY
            },
            className:"fire"
        });
    }
    

    function random(max,min){
        return Math.round(Math.random()*(max-min)+min)
    }
    function randomColor(){
        return `rgb(${random(200,255)},${random(100,255)},${random(100,255)})`;
    }
</script>
</html>

